$color-light: #c2a5b2;
$color-theme: #ff4a00;
$border-light: 1px solid #dfdfdf;
$color-light-bgc: #fafafa;
$font-color-normal: #9e7272;
$font-s: 14px;

// 初始化样式
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
button {
  cursor: pointer;
}
// 工具类
.dis-f {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-center {
  margin: 0 auto;
  align-items: center;
}
// --START--
.top {
  color: $color-light;
  background-color: $color-light-bgc;
  > div {
    padding: 15px;
    width: 1240px;
  }
  span {
    cursor: pointer;
  }
  span + span::before {
    content: "|";
    margin: 0 5px;
  }
}

main {
  width: 64%;
  min-width: 1240px;
  margin: 0 auto;
  padding: 0 15px;
  /*最上方logo和输入框*/
  header {
    height: 100px;
    button.shop {
      margin-left: 10px;
      background-color: #ffdb3d;
      width: 100px;
      height: 40px;
      border: none;
    }
    input {
      width: 420px;
      height: 40px;
    }
    button.search {
      width: 40px;
      height: 40px;
      border: $border-light;
      border-left: none;
      background-color: inherit;
    }
    .head-group {
      height: 70px;
      color: $color-light;
      font-size: $font-s;
    }
    .input-group {
      position: relative;
    }
    .input-text {
      position: absolute;
      right: 15px;
      top: 0;
      height: 100%;
      span {
        margin: 0 3px;
      }
    }
  }
  /* 轮播图区域*/
  .hero {
    border: $border-light;
    .left {
      width: 250px;
      h3 {
        padding: 0 15px;
        font-weight: normal;
        color: #ffffff;
        background-color: $color-theme;
        line-height: 40px;
      }
      .catigory {
        font-size: $font-s;
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 74px;
        color: $color-light;
        cursor: pointer;
        & + .catigory {
          border-top: $border-light;
        }
        &:hover {
          background-color: rgba($color: #404144, $alpha: 0.1);
        }
        .title {
          color: $color-theme;
        }
      }
    }
    .right {
      flex: 1;
      .nav {
        cursor: pointer;
        justify-content: space-evenly;
        line-height: 40px;
        background-color: #404144;
        color: #ffffff;
      }

      .swiper {
        height: 420px;
        position: relative;
        overflow: hidden;
        .counter,
        .wrapper {
          position: absolute;
        }
        .wrapper {
          height: 100%;
          background-color: red;
          display: flex;
          overflow: hidden;
        }
        .counter {
          display: flex;
          position: absolute;
          right: 15px;
          bottom: 15px;
          button {
            cursor: pointer;
            width: 25px;
            height: 25px;
            border: none;
            margin: 5px;
            color: #ffffff;
            outline: none;
            background-color: rgba(#000, 0.7);
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            &.active {
              background-color: rgba(#000, 0.5);
              color: #ff4a00;
            }
          }
        }
      }
      .bottom-group {
        flex: 1;
        .card {
          flex: 1;
          & + .card {
            border-left: $border-light;
          }
        }
      }
    }
  }
  /*明星单品*/
  .star-goods {
    margin: 15px 0;
    .title {
      margin: 15px 0;
      p {
        color: $font-color-normal;
        span {
          font-size: $font-s;
        }
      }
      .icons {
        width: 70px;
        border: $border-light;
        height: 22px;
        display: flex;
        cursor: pointer;
        div {
          display: flex;
          width: 50%;
          justify-content: center;
          align-items: center;
          &:first-child {
            border-right: $border-light;
          }
        }
        img {
          display: inline-block;
          height: 18px;
        }
      }
    }
    .card {
      padding: 0 0 20px 0;
      flex: 1;
      text-align: center;
      border: {
        top: $border-light;
        bottom: $border-light;
        right: $border-light;
      }
      &:first-child {
        border-left: $border-light;
      }
      p:nth-of-type(2) {
        font-size: $font-s;
        color: $color-light;
      }
    }
  }
  /*新品*/
  .new-goods {
    .title {
      margin: 15px 0;
    }
    .left {
      flex: 3;
      display: grid;
      border: {
        bottom: $border-light;
        right: $border-light;
      }
      height: 100%;
      width: 100%;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: 2fr 1fr 1fr 2fr;
      justify-items: center;
      align-items: center;
      [class^="item"] {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: {
          top: $border-light;
          left: $border-light;
        }
        position: relative;
        .desc {
          position: absolute;
          color: #666666;
          left: 15px;
          top: 15px;
        }
      }
      .item1 {
        grid-column: 1/3;
      }
      .item3,
      .item4 {
        justify-content: flex-end;
        padding-right: 20%;
      }
      .item4 {
        grid-row: 3/4;
      }
      .item5,
      .item6 {
        grid-row: 2/4;
      }
    }
    .right {
      color: #666666;
      flex: 1;
      padding-top: 20px;
      background-color: $color-light-bgc;
      border: {
        top: $border-light;
        right: $border-light;
        bottom: $border-light;
      }
      .cut-off {
        position: relative;

        .tip {
          font-size: $font-s;
          color: #fff;
          background-color: red;
          position: absolute;
          top: -20px;
          left: 55px;
        }
        > div {
          height: 120px;
          align-items: center;
          padding: 18px;
          border: {
            bottom: $border-light;
          }
          .del {
            text-decoration: line-through;
          }
          p + p {
            font-size: $font-s;
            color: $font-color-normal;
          }
          & + div {
            border-top: $border-light;
          }
        }
      }
      .list-group {
        padding: 30px 30px 10px 30px;
        .list {
          list-style: none;
          li {
            display: flex;
            line-height: 55px;
            justify-content: space-between;
            border-bottom: $border-light;
            font-size: $font-s;
          }
        }
        .huafei {
          * {
            margin: 15px 0;
          }
          input,
          select,
          .pay {
            width: 100%;
            height: 35px;
          }
          .tiny-text {
            font-size: $font-s;
          }
          .pay {
            background-color: #dcdee4;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
}
.footer {
  background-color: $color-light-bgc;
  footer {
    width: 64%;
    min-width: 1240px;
    margin: 70px auto 0;
    padding: 0 15px;
    .top {
      height: 160px;
      border-bottom: $border-light;
    }
    .mid {
      padding: 40px 0;
      ul {
        padding: 0 30px;
        list-style: none;
        width: 195px;
        border-right: $border-light;
        li:first-child {
          line-height: 2.5em;
        }
        li:not(:first-child) {
          font-size: $font-s;
          color: $font-color-normal;
          line-height: 2em;
        }
      }
      > div {
        text-align: center;
        flex: 1;
        h1 {
          font-weight: normal;
          color: $font-color-normal;
        }
        button {
          background-color: $color-theme;
          border: none;
          margin: 15px 0 0 0;
          color: #fff;
          width: 120px;
          height: 25px;
        }
      }
    }
    .bottom {
      font-size: $font-s;
      color: $font-color-normal ;
    }
  }
}
